<template>
  <el-dialog
    v-toggle-full
    class="base-dialog"
    :custom-class="'panna-dialog_big'"
    :title="title"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <p slot="title">{{ title }}</p>
    <el-table ref="table" border :data="tableData" style="width: 100%" height="calc(100% - 70px)">
      <el-table-column prop="sampleName" label="样品名称" />
      <el-table-column prop="sampleNum" label="样品编号" />
      <el-table-column prop="entrustPeople" label="接收数量">
        <template slot-scope="scope">
          {{
          scope.row.sampleReceiving != null
          ? scope.row.sampleReceiving.sampleCount
          : ""
          }}
        </template>
      </el-table-column>
      <el-table-column v-if="scrapState" label="报废数量">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.sampleScrapShowDto.sampleScrapCount"
            @blur="blurTexts($event, scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column v-if="scrapState" label="报废日期" width="150px">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.sampleScrapShowDto.sampleScrapDate"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column v-if="scrapState" label="报废类型">
        <template slot-scope="scope">
          <el-select v-model="scope.row.sampleScrapShowDto.sampleScrapTypeCode" placeholder="请选择">
            <el-option
              v-for="item in sampleScrapTypeData"
              :key="item.value"
              :label="item.name"
              :value="Number(item.value)"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column v-if="scrapState" label="退回地点">
        <template slot-scope="scope">
          <el-input v-model="scope.row.sampleScrapShowDto.sampleScrapAddress"></el-input>
        </template>
      </el-table-column>
      <el-table-column v-if="updateState" prop="makeTablePersonName" label="制表人" width="150px">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.makeTablePersonName"
            disabled
            style="width: 80%"
            autocomplete="off"
          ></el-input>
          <div class="chioseUser" @click="chioseUser(scope.$index)">+</div>
        </template>
      </el-table-column>
      <el-table-column v-if="updateState" prop="receivePerson" label="接收人">
        <template slot-scope="scope">
          <el-input v-model="scope.row.receivePerson"></el-input>
        </template>
      </el-table-column>
      <el-table-column v-if="updateState" prop="agencyPerson" label="经办人">
        <template slot-scope="scope">
          <el-input v-model="scope.row.agencyPerson"></el-input>
        </template>
      </el-table-column>
      <el-table-column v-if="updateState" prop="ratify" label="批准">
        <template slot-scope="scope">
          <el-input v-model="scope.row.ratify"></el-input>
        </template>
      </el-table-column>
      <el-table-column v-if="updateState" prop="remark" label="备注">
        <template slot-scope="scope">
          <el-input v-model="scope.row.remark"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="base-dialog-footer">
      <el-button v-loading="submitLoad" type="primary" @click="submitForm">提 交</el-button>
    </span>
    <ChoiceUserMessage
      ref="ChoiceUserMessage"
      :dialog-form-visible="userDialogFormVisible"
      @closeChioseUser="closeChioseUser"
    />
  </el-dialog>
</template>
<script>
import ChoiceUserMessage from "../SampleRegistration/ChoiceUserMessage.vue";
import { updateAssignColumn } from "../../../api/SampleManage/EntrustSampleInfo";
import { getDictList } from "../../../api/System/SystemDict";
import { create } from "../../../api/SampleManage/SampleScrap";
export default {
  name: "SampleStandingBookDialog",
  components: { ChoiceUserMessage },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Array,
      default: () => [],
    },
    // 点击编辑状态为true
    updateState: {
      type: Boolean,
      default: false,
    },
    // 点击报废状态为true
    scrapState: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: "台账信息编辑",
      dialogVisible: false,
      tableData: [],
      submitLoad: false,
      userDialogFormVisible: false,
      chioseUserIndex: "",
      sampleScrapTypeData: [],
    };
  },
  watch: {
    dialogVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.tableData = this.rowData;
    getDictList({ dictCode: "SampleScrapTypeCode" }).then((res) => {
      this.sampleScrapTypeData = res.data;
    });
    this.dialogVisible = this.dialogFormVisible;
  },
  methods: {
    // 判断输入内容
    blurTexts(e, row) {
      const boolean = new RegExp("^[1-9][0-9]*$").test(e.target.value);
      if (!boolean) {
        this.$message.warning("请输入正整数");
        e.target.value = "";
        return false;
      }
      if (e.target.value > row.sampleReceiving.sampleCount) {
        this.$message.warning("报废数量不能大于接收数量");
        e.target.value = "";
        return false;
      }
    },
    // 选择人员弹框关闭
    closeChioseUser(data) {
      this.tableData[this.chioseUserIndex].makeTablePersonName = data.name;
      this.tableData[this.chioseUserIndex].makeTablePerson = data.id;
    },
    // 选择人员
    chioseUser(index) {
      this.chioseUserIndex = index;
      this.userDialogFormVisible = true;
    },
    // 关闭弹框
    handleClose() {
      this.$emit("closeDialog");
    },
    // 提交
    submitForm() {
      this.submitLoad = true;
      if (this.updateState) {
        var data = {
          id: this.tableData[0].id,
          makeTablePerson: this.tableData[0].makeTablePerson,
          agencyPerson: this.tableData[0].agencyPerson,
          receivePerson: this.tableData[0].receivePerson,
          ratify: this.tableData[0].ratify,
          remark: this.tableData[0].remark,
        };
        updateAssignColumn(data)
          .then((res) => {
            this.submitLoad = false;
            this.handleClose();
          })
          .catch(() => {
            this.submitLoad = false;
          });
      } else if (this.scrapState) {
        var datas = [];
        for (let i = 0; i < this.tableData.length; i++) {
          datas.push(this.tableData[i].sampleScrapShowDto);
        }
        create(datas)
          .then((res) => {
            this.submitLoad = false;
            this.handleClose();
          })
          .catch(() => {
            this.submitLoad = false;
          });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.chioseUser {
  width: 30px;
  color: white;
  font-size: 35px;
  height: 25px;
  text-align: center;
  border-radius: 5px;
  border: 1px silver;
  background-color: #4787ff;
  position: absolute;
  top: 5px;
  right: 0px;
}
</style>
